import {
  Button,
  Col,
  Descriptions,
  DescriptionsItem,
  Form,
  FormItem,
  Image,
  Row,
  Spin
} from 'ant-design-vue'
import { defineComponent, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import { riverApi } from '@/apis'
import aiTestSkinApi from '@/apis/aiTestSkinApi'
import { AnalysisItem } from '@/apis/aiTestSkinTypes'
import { ServiceData, ServiceDataConfig } from '@/apis/riverTypes'
import { useBack } from '@/hooks/useBack'
import router from '@/router'

export default defineComponent({
  name: 'ServiceConfiguration',
  setup() {
    const isPreview = ref(false)
    const route = useRoute()
    const data = ref({} as AnalysisItem)
    const item = ref({} as ServiceDataConfig)
    const loading = ref(false)
    onMounted(() => {
      getDetail()
    })

    async function getDetail() {
      loading.value = true
      try {
        data.value = await aiTestSkinApi.getAnalysisDetails({
          id: route.query.id
        })
      } finally {
        loading.value = false
      }
    }

    const { handleCancel } = useBack('refreshFormationList')
    //返回列表
    function back() {
      handleCancel()
    }
    return {
      data,
      item,
      loading,
      isPreview,
      back,
      getDetail
    }
  },
  render() {
    return (
      <Spin spinning={this.loading}>
        <Form>
          <Row type="flex">
            <FormItem
              style={{ fontSize: '18px', fontWeight: 600, marginLeft: '52px' }}
            >
              测肤时间：
              {new Date(parseInt(this.data.createTime)).toLocaleString()}
            </FormItem>
          </Row>
          <Row type="flex">
            <FormItem
              style={{ fontSize: '18px', fontWeight: 600, marginLeft: '52px' }}
            >
              综合分析
            </FormItem>
          </Row>
          <Row type="flex">
            <Col span={5}>
              <FormItem
                label="肤质："
                style={{ marginLeft: '52px' }}
                colon={false}
              >
                {this.data.skinType}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="肌肤年龄：" colon={false}>
                {this.data.skinAge}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="综合得分:" colon={false}>
                {this.data.totalScore}
              </FormItem>
            </Col>
          </Row>
          <Row type="flex">
            <FormItem
              style={{
                fontSize: '18px',
                fontWeight: 600,
                marginTop: '30px',
                marginLeft: '52px'
              }}
            >
              肌肤状态
            </FormItem>
          </Row>
          <Row type="flex">
            <Col span={5}>
              <FormItem
                label="肌肤状态得分："
                style={{ marginLeft: '52px' }}
                colon={false}
              >
                {this.data.skinScore}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="色素暗沉：" colon={false}>
                {this.data.pigmentLevel}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="斑点等级：" colon={false}>
                {this.data.spotLevel}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="肤色：" colon={false}>
                {this.data.colorResult}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem
                label="痘印数量:"
                style={{ marginLeft: '52px' }}
                colon={false}
              >
                {this.data.pockmarkCcDyCount}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="色斑：" colon={false}>
                {this.data.spotCls}
              </FormItem>
            </Col>
          </Row>
          <Row type="flex">
            <FormItem
              style={{
                fontSize: '18px',
                fontWeight: 600,
                marginTop: '30px',
                marginLeft: '52px'
              }}
            >
              脸部皱纹
            </FormItem>
          </Row>
          <Row type="flex">
            <Col span={5}>
              <FormItem
                label="皱纹得分："
                style={{ marginLeft: '52px' }}
                colon={false}
              >
                {this.data.wrinkleScore}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="皱纹状态：" colon={false}>
                {this.data.wrinkleLevel}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="抬头纹：" colon={false}>
                {this.data.wrinkleForeheadCount}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="法令纹：" colon={false}>
                {this.data.wrinkleNasolabialCount}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem
                label="眉间纹："
                style={{ marginLeft: '52px' }}
                colon={false}
              >
                {this.data.wrinkleGlabellaCount}
              </FormItem>
            </Col>
          </Row>
          <Row type="flex">
            <FormItem
              style={{
                fontSize: '18px',
                fontWeight: 600,
                marginTop: '30px',
                marginLeft: '52px'
              }}
            >
              眼部状态
            </FormItem>
          </Row>
          <Row type="flex">
            <Col span={5}>
              <FormItem
                label="眼部状态得分："
                style={{ marginLeft: '52px' }}
                colon={false}
              >
                {this.data.darkCircleScore}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="黑眼圈类型：" colon={false}>
                {this.data.darkCircleType}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="严重程度：" colon={false}>
                {this.data.darkCircleLevel}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="眼角纹：" colon={false}>
                {this.data.wrinkleEyecornerCount}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem
                label="鱼尾纹："
                style={{ marginLeft: '52px' }}
                colon={false}
              >
                {this.data.wrinkleCrowfeetCount}
              </FormItem>
            </Col>
          </Row>
          <Row type="flex">
            <FormItem
              style={{
                fontSize: '18px',
                fontWeight: 600,
                marginTop: '30px',
                marginLeft: '52px'
              }}
            >
              出油情况
            </FormItem>
          </Row>
          <Row type="flex">
            <Col span={5}>
              <FormItem
                label="出油得分："
                style={{ marginLeft: '52px' }}
                colon={false}
              >
                {this.data.fatScore}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="痘痘：" colon={false}>
                {this.data.pockmarkLevel}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="毛孔：" colon={false}>
                {this.data.poreLevel}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="黑头：" colon={false}>
                {this.data.blackheadLevel}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem
                label="痤疮："
                style={{ marginLeft: '52px' }}
                colon={false}
              >
                {this.data.diseaseCc ? '有' : '无'}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="粗糙度：" colon={false}>
                {this.data.roughnessLevel}
              </FormItem>
            </Col>
          </Row>
          <Row type="flex">
            <FormItem
              style={{
                fontSize: '18px',
                fontWeight: 600,
                marginTop: '30px',
                marginLeft: '52px'
              }}
            >
              肌肤受损
            </FormItem>
          </Row>
          <Row type="flex">
            <Col span={5}>
              <FormItem
                label="肌肤受损得分："
                style={{ marginLeft: '52px' }}
                colon={false}
              >
                {this.data.skinDamageScore}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="敏感度：" colon={false}>
                {this.data.sensitiveType}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="皮肤炎：" colon={false}>
                {this.data.diseasePy ? '有' : '无'}
              </FormItem>
            </Col>
          </Row>
          <Row type="flex">
            <FormItem
              style={{
                fontSize: '18px',
                fontWeight: 600,
                marginTop: '30px',
                marginLeft: '52px'
              }}
            >
              推荐产品
            </FormItem>
          </Row>
          <Row type="flex">
            <Descriptions bordered style={{ marginLeft: '52px' }} column={2}>
              {this.data.productVos && this.data.productVos.length > 0 ? (
                this.data.productVos.map((product, index) => (
                  <DescriptionsItem
                    label={`产品名称：${product.productName}`}
                    key={index}
                  >
                    <Image
                      style={{ height: '100px' }}
                      src={product.productPictureUrl}
                    ></Image>
                  </DescriptionsItem>
                ))
              ) : (
                <DescriptionsItem label="产品名称">未上传</DescriptionsItem>
              )}
            </Descriptions>
          </Row>
          <Row type="flex">
            <Col span={5}>
              <Button
                style={{
                  width: '200px',
                  marginLeft: '152px',
                  marginTop: '50px',
                  marginBottom: '50px'
                }}
                onClick={() => this.back()}
              >
                返回列表
              </Button>
            </Col>
          </Row>
        </Form>
      </Spin>
    )
  }
})
